<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<meta name="generator" content="JsDoc Toolkit" />
		
		<title>JsDoc Reference - pv.Area</title>

		<style type="text/css">
			/* default.css */
body
{
	font: 12px "Lucida Grande", Tahoma, Arial, Helvetica, sans-serif;
	width: 800px;
}

.header
{
	clear: both;
	background-color: #ccc;
	padding: 8px;
}

h1
{
	font-size: 150%;
	font-weight: bold;
	padding: 0;
	margin: 1em 0 0 .3em;
}

hr
{
	border: none 0;
	border-top: 1px solid #7F8FB1;
	height: 1px;
}

pre.code
{
	display: block;
	padding: 8px;
	border: 1px dashed #ccc;
}

#index
{
	margin-top: 24px;
	float: left;
	width: 160px;
	position: absolute;
	left: 8px;
	background-color: #F3F3F3;
	padding: 8px;
}

#content
{
	margin-left: 190px;
	width: 600px;
}

.classList
{
	list-style-type: none;
	padding: 0;
	margin: 0 0 0 8px;
	font-family: arial, sans-serif;
	font-size: 1em;
	overflow: auto;
}

.classList li
{
	padding: 0;
	margin: 0 0 8px 0;
}

.summaryTable { width: 100%; }

h1.classTitle
{
	font-size:170%;
	line-height:130%;
}

h2 { font-size: 110%; }
caption, div.sectionTitle
{
	background-color: #7F8FB1;
	color: #fff;
	font-size:130%;
	text-align: left;
	padding: 2px 6px 2px 6px;
	border: 1px #7F8FB1 solid;
}

div.sectionTitle { margin-bottom: 8px; }
.summaryTable thead { display: none; }

.summaryTable td
{
	vertical-align: top;
	padding: 4px;
	border-bottom: 1px #7F8FB1 solid;
	border-right: 1px #7F8FB1 solid;
}

/*col#summaryAttributes {}*/
.summaryTable td.attributes
{
	border-left: 1px #7F8FB1 solid;
	width: 140px;
	text-align: right;
}

td.attributes, .fixedFont
{
	line-height: 15px;
	color: #002EBE;
	font-family: "Courier New",Courier,monospace;
	font-size: 13px;
}

.summaryTable td.nameDescription
{
	text-align: left;
	font-size: 13px;
	line-height: 15px;
}

.summaryTable td.nameDescription, .description
{
	line-height: 15px;
	padding: 4px;
	padding-left: 4px;
}

pre
{
	border-left: solid 10px #ddd;
	padding-left: 1.5em;
}

.summaryTable { margin-bottom: 8px; }

ul.inheritsList
{
	list-style: square;
	margin-left: 20px;
	padding-left: 0;
}

.detailList {
	margin-left: 20px; 
	line-height: 15px;
}
.detailList dt { margin-left: 20px; }

.detailList .heading
{
	font-weight: bold;
	padding-bottom: 6px;
	margin-left: 0;
}

.light, td.attributes, .light a:link, .light a:visited
{
	color: #777;
	font-style: italic;
}

.fineprint
{
	text-align: right;
	font-size: 10px;
}

		</style>
	</head>

	<body>
<!-- ============================== header ================================= -->	
		<!-- begin static/header.html -->
		<div id="header">
</div>
		<!-- end static/header.html -->

<!-- ============================== classes index ============================ -->
		<div id="index">
			<!-- begin publish.classesIndex -->
			<div align="center"><a href="../index.html">Class Index</a>
| <a href="../files.html">File Index</a></div>
<hr />
<h2>Classes</h2>
<ul class="classList">
	
	<li><i><a href="../symbols/_global_.html">_global_</a></i></li>
	
	<li><a href="../symbols/Array.html">Array</a></li>
	
	<li><a href="../symbols/Date.html">Date</a></li>
	
	<li><a href="../symbols/pv.html">pv</a></li>
	
	<li><a href="../symbols/pv.Anchor.html">pv.Anchor</a></li>
	
	<li><a href="../symbols/pv.Area.html">pv.Area</a></li>
	
	<li><a href="../symbols/pv.Bar.html">pv.Bar</a></li>
	
	<li><a href="../symbols/pv.Color.html">pv.Color</a></li>
	
	<li><a href="../symbols/pv.Color.Hsl.html">pv.Color.Hsl</a></li>
	
	<li><a href="../symbols/pv.Color.Rgb.html">pv.Color.Rgb</a></li>
	
	<li><a href="../symbols/pv.Colors.html">pv.Colors</a></li>
	
	<li><a href="../symbols/pv.Dot.html">pv.Dot</a></li>
	
	<li><a href="../symbols/pv.Flatten.html">pv.Flatten</a></li>
	
	<li><a href="../symbols/pv.Image.html">pv.Image</a></li>
	
	<li><a href="../symbols/pv.Label.html">pv.Label</a></li>
	
	<li><a href="../symbols/pv.Layout.grid.html">pv.Layout.grid</a></li>
	
	<li><a href="../symbols/pv.Layout.icicle.html">pv.Layout.icicle</a></li>
	
	<li><a href="../symbols/pv.Layout.stack.html">pv.Layout.stack</a></li>
	
	<li><a href="../symbols/pv.Layout.sunburst.html">pv.Layout.sunburst</a></li>
	
	<li><a href="../symbols/pv.Layout.treemap.html">pv.Layout.treemap</a></li>
	
	<li><a href="../symbols/pv.Line.html">pv.Line</a></li>
	
	<li><a href="../symbols/pv.Mark.html">pv.Mark</a></li>
	
	<li><a href="../symbols/pv.Nest.html">pv.Nest</a></li>
	
	<li><a href="../symbols/pv.ns.html">pv.ns</a></li>
	
	<li><a href="../symbols/pv.Panel.html">pv.Panel</a></li>
	
	<li><a href="../symbols/pv.Rule.html">pv.Rule</a></li>
	
	<li><a href="../symbols/pv.Scale.linear.html">pv.Scale.linear</a></li>
	
	<li><a href="../symbols/pv.Scale.log.html">pv.Scale.log</a></li>
	
	<li><a href="../symbols/pv.Scale.ordinal.html">pv.Scale.ordinal</a></li>
	
	<li><a href="../symbols/pv.Tree.html">pv.Tree</a></li>
	
	<li><a href="../symbols/pv.Vector.html">pv.Vector</a></li>
	
	<li><a href="../symbols/pv.version.html">pv.version</a></li>
	
	<li><a href="../symbols/pv.Wedge.html">pv.Wedge</a></li>
	
</ul>
<hr />
			<!-- end publish.classesIndex -->
		</div>
		
		<div id="content">
<!-- ============================== class title ============================ -->
			<h1 class="classTitle">
				
				Class pv.Area
			</h1>

<!-- ============================== class summary ========================== -->			
			<p class="description">
				<br />Extends
					<a href="../symbols/pv.Mark.html">pv.Mark</a>.<br />
				
			
				Represents an area mark: the solid area between two series of
connected line segments. Unsurprisingly, areas are used most frequently for
area charts.

<p>Just as a line represents a polyline, the <tt>Area</tt> mark type
represents a <i>polygon</i>. However, an area is not an arbitrary polygon;
vertices are paired either horizontally or vertically into parallel
<i>spans</i>, and each span corresponds to an associated datum. Either the
width or the height must be specified, but not both; this determines whether
the area is horizontally-oriented or vertically-oriented.  Like lines, areas
can be stroked and filled with arbitrary colors.

<p>See also the <a href="../../api/Area.html">Area guide</a>.
				
				
					<br /><i>Defined in: </i> <a href="../symbols/src/mark_Area.js.html">Area.js</a>.
				
			</p>

<!-- ============================== constructor summary ==================== -->			
			
			<table class="summaryTable" cellspacing="0" summary="A summary of the constructor documented in the class pv.Area.">
				<caption>Class Summary</caption>
				<thead>
					<tr>
						<th scope="col">Constructor Attributes</th>
						<th scope="col">Constructor Name and Description</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td class="attributes">&nbsp;</td>
						<td class="nameDescription" >
							<div class="fixedFont">
								<b><a href="../symbols/pv.Area.html#constructor">pv.Area</a></b>()
							</div>
							<div class="description">Constructs a new area mark with default properties.</div>
						</td>
					</tr>
				</tbody>
			</table>
			

<!-- ============================== properties summary ===================== -->
			
				
				
				<table class="summaryTable" cellspacing="0" summary="A summary of the fields documented in the class pv.Area.">
					<caption>Field Summary</caption>
					<thead>
						<tr>
							<th scope="col">Field Attributes</th>
							<th scope="col">Field Name and Description</th>
						</tr>
					</thead>
					<tbody>
					
						<tr>
							<td class="attributes">&nbsp;</td>
							<td class="nameDescription">
								<div class="fixedFont">
								<b><a href="../symbols/pv.Area.html#defaults">defaults</a></b>
								</div>
								<div class="description">Default properties for areas.</div>
							</td>
						</tr>
					
						<tr>
							<td class="attributes">&nbsp;</td>
							<td class="nameDescription">
								<div class="fixedFont">
								<b><a href="../symbols/pv.Area.html#fillStyle">fillStyle</a></b>
								</div>
								<div class="description">The area fill style; if non-null, the interior of the polygon forming the
area is filled with the specified color.</div>
							</td>
						</tr>
					
						<tr>
							<td class="attributes">&nbsp;</td>
							<td class="nameDescription">
								<div class="fixedFont">
								<b><a href="../symbols/pv.Area.html#height">height</a></b>
								</div>
								<div class="description">The height of a given span, in pixels; used for vertical spans.</div>
							</td>
						</tr>
					
						<tr>
							<td class="attributes">&nbsp;</td>
							<td class="nameDescription">
								<div class="fixedFont">
								<b><a href="../symbols/pv.Area.html#interpolate">interpolate</a></b>
								</div>
								<div class="description">How to interpolate between values.</div>
							</td>
						</tr>
					
						<tr>
							<td class="attributes">&nbsp;</td>
							<td class="nameDescription">
								<div class="fixedFont">
								<b><a href="../symbols/pv.Area.html#lineWidth">lineWidth</a></b>
								</div>
								<div class="description">The width of stroked lines, in pixels; used in conjunction with
<tt>strokeStyle</tt> to stroke the perimeter of the area.</div>
							</td>
						</tr>
					
						<tr>
							<td class="attributes">&nbsp;</td>
							<td class="nameDescription">
								<div class="fixedFont">
								<b><a href="../symbols/pv.Area.html#segmented">segmented</a></b>
								</div>
								<div class="description">Whether the area is segmented; whether variations in fill style, stroke
style, and the other properties are treated as fixed.</div>
							</td>
						</tr>
					
						<tr>
							<td class="attributes">&nbsp;</td>
							<td class="nameDescription">
								<div class="fixedFont">
								<b><a href="../symbols/pv.Area.html#strokeStyle">strokeStyle</a></b>
								</div>
								<div class="description">The style of stroked lines; used in conjunction with <tt>lineWidth</tt> to
stroke the perimeter of the area.</div>
							</td>
						</tr>
					
						<tr>
							<td class="attributes">&nbsp;</td>
							<td class="nameDescription">
								<div class="fixedFont">
								<b><a href="../symbols/pv.Area.html#width">width</a></b>
								</div>
								<div class="description">The width of a given span, in pixels; used for horizontal spans.</div>
							</td>
						</tr>
					
					</tbody>
				</table>
				
				
				
				<dl class="inheritsList">
				<dt>Fields borrowed from class <a href="../symbols/pv.Mark.html">pv.Mark</a>: </dt><dd><a href="../symbols/pv.Mark.html#bottom">bottom</a>, <a href="../symbols/pv.Mark.html#childIndex">childIndex</a>, <a href="../symbols/pv.Mark.html#cursor">cursor</a>, <a href="../symbols/pv.Mark.html#data">data</a>, <a href="../symbols/pv.Mark.html#index">index</a>, <a href="../symbols/pv.Mark.html#left">left</a>, <a href="../symbols/pv.Mark.html#parent">parent</a>, <a href="../symbols/pv.Mark.html#proto">proto</a>, <a href="../symbols/pv.Mark.html#reverse">reverse</a>, <a href="../symbols/pv.Mark.html#right">right</a>, <a href="../symbols/pv.Mark.html#root">root</a>, <a href="../symbols/pv.Mark.html#scene">scene</a>, <a href="../symbols/pv.Mark.html#title">title</a>, <a href="../symbols/pv.Mark.html#top">top</a>, <a href="../symbols/pv.Mark.html#type">type</a>, <a href="../symbols/pv.Mark.html#visible">visible</a></dd>
				</dl>
				
			

<!-- ============================== methods summary ======================== -->
			
				
				
				<table class="summaryTable" cellspacing="0" summary="A summary of the methods documented in the class pv.Area.">
					<caption>Method Summary</caption>
					<thead>
						<tr>
							<th scope="col">Method Attributes</th>
							<th scope="col">Method Name and Description</th>
						</tr>
					</thead>
					<tbody>
					
						<tr>
							<td class="attributes">&nbsp;</td>
							<td class="nameDescription">
								<div class="fixedFont"><b><a href="../symbols/pv.Area.html#anchor">anchor</a></b>(name)
								</div>
								<div class="description">Constructs a new area anchor with default properties.</div>
							</td>
						</tr>
					
					</tbody>
				</table>
				
				
				
				<dl class="inheritsList">
				<dt>Methods borrowed from class <a href="../symbols/pv.Mark.html">pv.Mark</a>: </dt><dd><a href="../symbols/pv.Mark.html#add">add</a>, <a href="../symbols/pv.Mark.html#anchorTarget">anchorTarget</a>, <a href="../symbols/pv.Mark.html#cousin">cousin</a>, <a href="../symbols/pv.Mark.html#def">def</a>, <a href="../symbols/pv.Mark.html#event">event</a>, <a href="../symbols/pv.Mark.html#extend">extend</a>, <a href="../symbols/pv.Mark.html#first">first</a>, <a href="../symbols/pv.Mark.html#last">last</a>, <a href="../symbols/pv.Mark.html#mouse">mouse</a>, <a href="../symbols/pv.Mark.html#render">render</a>, <a href="../symbols/pv.Mark.html#sibling">sibling</a></dd>
				</dl>
				
			
<!-- ============================== events summary ======================== -->
			

<!-- ============================== constructor details ==================== -->		
			
			<div class="details"><a name="constructor"> </a>
				<div class="sectionTitle">
					Class Detail
				</div>
				
				<div class="fixedFont">
						<b>pv.Area</b>()
				</div>
				
				<div class="description">
					Constructs a new area mark with default properties. Areas are not typically
constructed directly, but by adding to a panel or an existing mark via
<a href="../symbols/pv.Mark.html#add">pv.Mark#add</a>.
					
				</div>
				
				
				
				
					
					
					
					
					
					
					

			</div>
			

<!-- ============================== field details ========================== -->		
			
				<div class="sectionTitle">
					Field Detail
				</div>
				
					<a name="defaults"> </a>
					<div class="fixedFont">
					
					<span class="light">{<a href="../symbols/pv.Area.html">pv.Area</a>}</span>
					<b>defaults</b>
					
					</div>
					<div class="description">
						Default properties for areas. By default, there is no stroke and the fill
style is a categorical color.
						
						
					</div>
					
					

						
						
						
						

					<hr />
				
					<a name="fillStyle"> </a>
					<div class="fixedFont">
					
					<span class="light">{string}</span>
					<b>fillStyle</b>
					
					</div>
					<div class="description">
						The area fill style; if non-null, the interior of the polygon forming the
area is filled with the specified color. The default value of this property
is a categorical color.

<p>This property is <i>fixed</i> for non-segmented areas. See
<a href="../symbols/pv.Mark.html">pv.Mark</a>.
						
						
					</div>
					
					

						
						
						
							<dl class="detailList">
							<dt class="heading">See:</dt>
							
							<dd><a href="../symbols/pv.html#.color">pv.color</a></dd>
							
							</dl>
						
						

					<hr />
				
					<a name="height"> </a>
					<div class="fixedFont">
					
					<span class="light">{number}</span>
					<b>height</b>
					
					</div>
					<div class="description">
						The height of a given span, in pixels; used for vertical spans. If the height
is specified, the width property should be 0 (the default). Either the left
or right property should be used to space the spans horizontally, typically
as a multiple of the index.
						
						
					</div>
					
					

						
						
						
						

					<hr />
				
					<a name="interpolate"> </a>
					<div class="fixedFont">
					
					<span class="light">{string}</span>
					<b>interpolate</b>
					
					</div>
					<div class="description">
						How to interpolate between values. Linear interpolation ("linear") is the
default, producing a straight line between points. For piecewise constant
functions (i.e., step functions), either "step-before" or "step-after" can be
specified.

<p>Note: this property is currently supported only on non-segmented areas.

<p>This property is <i>fixed</i>. See <a href="../symbols/pv.Mark.html">pv.Mark</a>.
						
						
					</div>
					
					

						
						
						
						

					<hr />
				
					<a name="lineWidth"> </a>
					<div class="fixedFont">
					
					<span class="light">{number}</span>
					<b>lineWidth</b>
					
					</div>
					<div class="description">
						The width of stroked lines, in pixels; used in conjunction with
<tt>strokeStyle</tt> to stroke the perimeter of the area. Unlike the
Line mark type, the entire perimeter is stroked, rather than just one
edge. The default value of this property is 1.5, but since the default stroke
style is null, area marks are not stroked by default.

<p>This property is <i>fixed</i> for non-segmented areas. See
<a href="../symbols/pv.Mark.html">pv.Mark</a>.
						
						
					</div>
					
					

						
						
						
						

					<hr />
				
					<a name="segmented"> </a>
					<div class="fixedFont">
					
					<span class="light">{boolean}</span>
					<b>segmented</b>
					
					</div>
					<div class="description">
						Whether the area is segmented; whether variations in fill style, stroke
style, and the other properties are treated as fixed. Rendering segmented
areas is noticeably slower than non-segmented areas.

<p>This property is <i>fixed</i>. See <a href="../symbols/pv.Mark.html">pv.Mark</a>.
						
						
					</div>
					
					

						
						
						
						

					<hr />
				
					<a name="strokeStyle"> </a>
					<div class="fixedFont">
					
					<span class="light">{string}</span>
					<b>strokeStyle</b>
					
					</div>
					<div class="description">
						The style of stroked lines; used in conjunction with <tt>lineWidth</tt> to
stroke the perimeter of the area. Unlike the Line mark type, the
entire perimeter is stroked, rather than just one edge. The default value of
this property is null, meaning areas are not stroked by default.

<p>This property is <i>fixed</i> for non-segmented areas. See
<a href="../symbols/pv.Mark.html">pv.Mark</a>.
						
						
					</div>
					
					

						
						
						
							<dl class="detailList">
							<dt class="heading">See:</dt>
							
							<dd><a href="../symbols/pv.html#.color">pv.color</a></dd>
							
							</dl>
						
						

					<hr />
				
					<a name="width"> </a>
					<div class="fixedFont">
					
					<span class="light">{number}</span>
					<b>width</b>
					
					</div>
					<div class="description">
						The width of a given span, in pixels; used for horizontal spans. If the width
is specified, the height property should be 0 (the default). Either the top
or bottom property should be used to space the spans vertically, typically as
a multiple of the index.
						
						
					</div>
					
					

						
						
						
						

					
				
			

<!-- ============================== method details ========================= -->		
			
				<div class="sectionTitle">
					Method Detail
				</div>
				
					<a name="anchor"> </a>
					<div class="fixedFont">
					
					<span class="light">{<a href="../symbols/pv.Anchor.html">pv.Anchor</a>}</span>
					<b>anchor</b>(name)
					
					</div>
					<div class="description">
						Constructs a new area anchor with default properties. Areas support five
different anchors:<ul>

<li>top
<li>left
<li>center
<li>bottom
<li>right

</ul>In addition to positioning properties (left, right, top bottom), the
anchors support text rendering properties (text-align, text-baseline). Text is
rendered to appear inside the area polygon.

<p>To facilitate stacking of areas, the anchors are defined in terms of their
opposite edge. For example, the top anchor defines the bottom property, such
that the area grows upwards; the bottom anchor instead defines the top
property, such that the area grows downwards. Of course, in general it is
more robust to use panels and the cousin accessor to define stacked area
marks; see <a href="../symbols/pv.Mark.html#scene">pv.Mark#scene</a> for an example.
						
						
					</div>
					
					
					
						
							<dl class="detailList">
							<dt class="heading">Parameters:</dt>
							
								<dt>
									<span class="light fixedFont">{string}</span> <b>name</b>
									
								</dt>
								<dd>the anchor name; either a string or a property function.</dd>
							
							</dl>
						
						
						
						
						
							<dl class="detailList">
							<dt class="heading">Returns:</dt>
							
								<dd><span class="light fixedFont">{<a href="../symbols/pv.Anchor.html">pv.Anchor</a>}</span> </dd>
							
							</dl>
						
						
						

					
				
			
			
<!-- ============================== event details ========================= -->		
			
			
			<hr />
		</div>

		
<!-- ============================== footer ================================= -->
		<div class="fineprint" style="clear:both">
			
			Documentation generated by <a href="http://code.google.com/p/jsdoc-toolkit/" target="_blank">JsDoc Toolkit</a> 2.3.0 on Tue Oct 06 2009 09:59:02 GMT-0700 (PDT)
		</div>
	</body>
</html>
